<script>
import ThesaurusItem from "./components/thesaurusItem.vue"
import ChooseDailyCount from "./components/chooseDailyCount.vue"
import store from "../../../store"
import { userActionType } from "@/store/modules/user"
import request from "../../../utils/request"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import { cloneDeep } from "@/utils"
import daiBeiAlert from "@/components/daiBeiAlert.vue"

export default {
  name: "addPlan",
  components: { ChooseDailyCount, ThesaurusItem, daiBeiAlert },
  data() {
    return {
      thesaurusDetail: {
        thesaurusCategory: "",
      },
      dailyWordCount: 0,
    }
  },
  onLoad(query) {
    this.thesaurusDetail = cloneDeep(store.getters[vocabularyLearningActionType.getters.vocabularyDetail])
    console.log(this.thesaurusDetail, "this.thesaurusDetail")
    store.commit(vocabularyLearningActionType.mutations.vocabularyDetail, null)
  },
	computed: {
		userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
	},
  methods: {
    async submit() {
      // 如果是带背类型词库检查词库是否可用
      if (this.thesaurusDetail.thesaurusCategory === "Racked") {
        if (!(await this.$refs.daiBeiAlert.checkAvailable(this.thesaurusDetail.thesaurusId, this.thesaurusDetail.jumpPaidPage))) {
          return
        }
      }
			if (!this.userSelectExamId) {
				await store.dispatch(userActionType.action.examInfo, { jumpToSelectExamPage: true })
			}
      await request({
        url: "userCheckPlan/add",
        data: {
          thesaurusId: this.thesaurusDetail.thesaurusId,
          dailyWordCount: this.dailyWordCount,
          examId: this.userSelectExamId,
          currentDay: 1,
          practiceMode: "英考中",
        },
        showLoading: true,
        errorHandle: true,
      })
      uni.reLaunch({
        url: "/vocabulary/pages/currentPlanInfo/index",
      })
    },
  },
}
</script>

<template>
  <view class="page">
    <thesaurus-item :detail="thesaurusDetail"></thesaurus-item>
    <!--		带背类型不显示-->
    <view class="block" v-if="thesaurusDetail.thesaurusCategory !== 'Racked'">
      <choose-daily-count
        :remain-word-count="thesaurusDetail.thesaurusNum"
        @change="
          (val) => {
            dailyWordCount = val
          }
        "
      ></choose-daily-count>
    </view>
    <view class="submit-btn" @click="submit">开始学习该计划</view>

    <daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
  </view>
</template>

<style scoped lang="scss">
.page {
  background: var(--gray-background-color);
  padding: 30rpx;
  min-height: 100vh;
}
.block {
  margin-top: 30rpx;
}
.submit-btn {
  margin: {
    top: 200rpx;
  }
  background: var(--theme-color);
  color: var(--text-color-white);
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;
  font-size: 36rpx;
}
</style>
